<template>
  <div>
    <el-row>
      <el-col :span="6" align="center">
        <mychart :datas="datas" :names="names" :width="'100%'" :heght="'400px'"></mychart> 
        <el-button @click="start" size="small" type="primary">Start</el-button>
        <el-button @click="stop" size="small" type="warning">Stop</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import mychart from "@/components/echartTemplate/pieChart";

export default {
  components: {
    mychart
  },
  data() {
    return {
      datas: [
        { value: 320, name: "Industries" },
        { value: 240, name: "Technology" },
        { value: 149, name: "Forex" },
        { value: 100, name: "Gold" },
        { value: 59, name: "Forecasts" }
      ],
      names:[ "Industries","Technology","Forex","Gold","Forecasts"],
      time:''
    };
  },
  methods:{
    start(){
      this.time = setInterval( ()=>{
        this.datas[Math.round(Math.random()*(this.datas.length-1))].value += 100
      },200)
    },
    stop(){
      clearInterval(this.time)
    }
  },
  mounted(){
    
  }
};
</script>

<style scoped>

</style>
